<div [@routerTransition]>

    <div class="m-login__signin">
        <div class="m-login__head">
            <h3 class="m-login__title">
                {{'VerifySecurityCode' | localize}}
            </h3>
        </div>
        <form #twoFactorForm="ngForm" class="m-login__form m-form verify-security-code-form" method="post" (ngSubmit)="submit()">

            <div class="form-group m-form__group">
                <input #passwordInput="ngModel" autoFocus [(ngModel)]="code" class="form-control form-control-solid placeholder-no-fix input-ltr" type="password" autocomplete="off" placeholder="{{'Code' | localize}} *" name="code" required maxlength="16" />
                <validation-messages [formCtrl]="passwordInput"></validation-messages>
            </div>

            <div class="form-group margin-top-20">
                <label class="m-checkbox">
                    <input class="form-control" [(ngModel)]="loginService.authenticateModel.rememberClient" type="checkbox" name="rememberClient" value="true" />{{"RememberThisBrowser" | localize}}
                    <span></span>
                </label>
            </div>


            <div class="m-login__form-action">
                <button type="submit" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--air" [disabled]="!twoFactorForm.form.valid">{{"Submit" | localize}}</button>
                <span class="remaining-time-counter" *ngIf="remainingSeconds >= 0">{{"RemainingTime" | localize}}: {{"SecondShort{0}" | localize:remainingSeconds}}.</span>
            </div>
        </form>
    </div>

</div>
